<template>
  <div class="num-layout">
    <div style="display: flex;flex: 1;">
      <div class="right box-border">
        <div class="one">
          <p class="large">
            {{ monthShouHuo ? monthShouHuo : '/' }}
          </p>
          <p class="text">月收货</p>
        </div>
      </div>
      <div class="right box-border">
        <div class="three">
          <p class="large">{{ monthZhiJian ? monthZhiJian : '/' }}</p>
          <p class="text">月质检</p>
        </div>
      </div>
      <div class="right box-border" style="margin-right: 0;">
        <div class="two">
          <p class="large">
            {{ monthChuKu ? monthChuKu  : '/' }}
          </p>
          <p class="text">月出库</p>
        </div>
      </div>
    </div>
    <div style="display: flex;flex: 1;width: 100%;">
      <div class="right box-border">
        <div class="one">
          <p class="large">
            {{ monthShangJia ? monthShangJia : '/' }}
          </p>
          <p class="text">月上架</p>
        </div>
      </div>
      <div class="right box-border">
        <div class="three">
          <p class="large">{{ monthXiaJia ? monthXiaJia : '/' }}</p>
          <p class="text">月下架</p>
        </div>
      </div>
      <div class="right box-border" style="margin-right: 0;">
        <div class="two">
          <p class="large">
            {{ heGmonthPingJuneLv ? monthPingJun  : '/' }}
          </p>
          <p class="text">月合格</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getStockTaskApi} from '../../../api/product/index.js'
export default {
  name: 'SumInfo',
  data() {
    return {
      monthShouHuo: '',
      monthZhiJian: '',
      monthChuKu: '',
      monthShangJia: '',
      monthXiaJia: '',
      monthPingJun: '',
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const _that = this
      getStockTaskApi({pkCorp: 1002}).then(res => {
        const {code,data} = res
        if(code === 2000) {
          console.log('getMoldOtherApi',data)
          _that.monthShouHuo = data.monthShouHuo || ''
          _that.monthZhiJian = data.monthZhiJian || ''
          _that.monthChuKu = data.monthChuKu || ''
          _that.monthShangJia = data.monthShangJia || ''
          _that.monthXiaJia = data.monthXiaJia || ''
          _that.monthPingJun = data.monthPingJun || ''
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.one {
  color: #01c0ff;
}
.two {
  color: #ffa421;
}
.three {
  color: #39fb9e;
}
.four {
  color: #fa563b;
}
.num-layout {
  height: 90%;
  padding: 0 12px 12px 12px;
  display: flex;
  flex-direction: column;
  .right {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    .large {
      flex: 1;
      .px2font(30);
      // color: #68d8fe;
      /* color: #2de3f9; */
      margin-bottom: 2px;
    }

    .text {
      flex: 1;
      // color: #ccc;
      .px2font(14);
    }
  }
}
</style>
